<!-- 状态栏，显示经纬度 -->
<template>
    <div v-show:=isShow class="cesium-viewer-timelineContainer statusBarClass" ref="statusbar">
        <li><label></label>{{ filed1 }}<label style='width:0'>{{ lon }}</label></li>
        <li><label>{{ filde2 }}</label><label style='width:0'>{{ lat }}</label></li>
        <li><label style='margin-left: 20px'>海拔：</label><label style='width:90px'>{{ h }}</label></li>
        <li style='width:20%'><label style='width: 30%;'>比例尺： </label><label style='width:0px'>{{ plottingScale
                }}</label></li>
    </div>
</template>

<script>
import { Cartesian2, EllipsoidGeodesic, ScreenSpaceEventHandler, ScreenSpaceEventType, defined } from 'cesium';
import commonMethod from '@/common/commonMethod';
import coordCovert from '@/common/coordCovert';

export default {
    name: "Statusbar",
    props: {
        model: {
            type: String,
            default: "GPS"
        },
        width: {
            type: String,
            default: "100%"
        },
        heigh: {
            type: String,
            default: "100%"
        },
        textcolor: {
            type: String
        }
    },
    beforeDestroy() {
        this.isShow = true;
        this.model = "GPS";
    },
    data() {
        return {
            curViewer:null,
            isShow: true,
            filed1: "经度：",
            filde2: "纬度：",
            lon: 0,
            lat: 0,
            h: 0,
            // model:"GPS",
            plottingScale: "1:250000km"
        }
    },
    methods: {
        //监听鼠标事件
        listenerPositon(viewer) {
            if ( viewer == undefined) {
                this.isShow = false;
            }
            if (this.isShow) {
                //判断什么模式下的显示
                if (this.model == "GPS") {
                    this.filed1 = "经度：";
                    this.filde2 = "纬度：";
                } else {
                    this.filed1 = "X：";
                    this.filde2 = "Y：";
                }
            }
            this.curViewer = viewer;
            const stationDrawHandler = new ScreenSpaceEventHandler(this.curViewer.canvas);

            stationDrawHandler.setInputAction(event => {
                let pickedObject = event.endPosition;
                if (defined(pickedObject)) {
                    let ray = this.curViewer.camera.getPickRay(pickedObject);
                    if (!defined(ray)) {
                        return;
                    }
                    let cartesian = this.curViewer.scene.globe.pick(ray, this.curViewer.scene);
                    if (defined(cartesian)) {
                        //重新对位置进行赋值
                        this.coordCovertPosition(cartesian);
                        //比例尺刷新
                        this.updateDistanceLegendCesium(this.curViewer.scene);
                    }
                }
            }, ScreenSpaceEventType.MOUSE_MOVE);

        },
        //比例尺确定
        updateDistanceLegendCesium(scene) {

            const distances = [
                1, 2, 3, 5,
                10, 20, 30, 50,
                100, 200, 300, 500,
                1000, 2000, 3000, 5000,
                10000, 20000, 30000, 50000,
                100000, 200000, 300000, 500000,
                1000000, 2000000, 3000000, 5000000,
                10000000, 20000000, 30000000, 50000000]

            const geodesic = new EllipsoidGeodesic();

            let width = scene.canvas.clientWidth;
            let height = scene.canvas.clientHeight;

            let left = scene.camera.getPickRay(new Cartesian2((width / 2) | 0, height - 1));
            let right = scene.camera.getPickRay(new Cartesian2(1 + (width / 2) | 0, height - 1));

            let globe = scene.globe;
            let leftPosition = globe.pick(left, scene);
            let rightPosition = globe.pick(right, scene);

            if (!defined(leftPosition) || !defined(rightPosition)) {
                return;
            }

            let leftCartographic = globe.ellipsoid.cartesianToCartographic(leftPosition);
            let rightCartographic = globe.ellipsoid.cartesianToCartographic(rightPosition);

            geodesic.setEndPoints(leftCartographic, rightCartographic);

            let pixelDistance = geodesic.surfaceDistance;
            this.plottingScale = pixelDistance;

            const maxBarWidth = 100;
            let distance;
            for (let i = distances.length - 1; !defined(distance) && i >= 0; --i) {
                if (distances[i] / pixelDistance < maxBarWidth) {
                    distance = distances[i];
                }
            }

            if (defined(distance)) {
                if (distance >= 1000) {
                    this.plottingScale = "1:" + (distance / 1000).toString() + "km";
                } else {
                     this.plottingScale = "1:" + distance.toString() + "m";
                }
            }
        },
        //经纬度转换函数
        coordCovertPosition(endPosition) {

            let p = commonMethod.convertC3ToPosition(endPosition, this.curViewer);
            if (this.model === "GPS") {
                this.lat = p.latitude.toFixed(6);
                this.lon = p.longitude.toFixed(6);
                this.h = p.height.toFixed(2) + "米";
            } else {
                let w = coordCovert.LatLonToGauss(p.longitude, p.latitude);

                this.lat = w.x.toFixed(6);
                this.lon = w.y.toFixed(6);
                this.h = p.height.toFixed(2) + "米";
            }

        }
    }
}
</script>
<style>
.statusBarClass{
    position: absolute;
    bottom: 53px;
    width: 90%;
    left: 195px;
    /* right: 30px; */
    z-index: 999;
    list-style: none;
    color: white;
    text-align: center;
    background: linear-gradient(to bottom,rgba(116,117,119,.8) 0,rgba(58,68,82,.8) 11%,rgba(46,50,56,.8) 46%,rgba(53,53,53,.8) 81%,rgba(53,53,53,.8) 100%);
}

.statusBarClass li{
    float: left;
    width: 212px;
    line-height: 2;
}

.statusBar li label:first-child{
    width: 50px;
}
</style>